<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="关键字" prop="key">
        <el-input v-model="queryParams.key" placeholder="交易日期、对方账号、对方姓名" clearable style="width: 230px" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="出 | 入账" prop="trnType">
        <el-select v-model="queryParams.trnType" placeholder="借贷标记">
          <el-option v-for="dict in loanStatusList" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="对账" prop="isVerify">
        <el-select v-model="queryParams.isVerify" clearable>
          <el-option v-for="dict in verifyStatusList" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="创建时间">
        <el-date-picker v-model="dateRange" style="width: 340px" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss">
          ></el-date-picker>
      </el-form-item>
      <el-form-item label="交易金额">
        <el-input v-model="queryParams.beginAmount" placeholder="最小金额" clearable style="width: 100px" @keyup.enter.native="handleQuery" />
        -
        <el-input v-model="queryParams.endAmount" placeholder="最大金额" clearable style="width: 100px" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-download" size="mini" @click="exportExcel" v-hasPermi="['publicBill:bankFlow:export']">导出</el-button>
      </el-col>
      <!-- <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar> -->
    </el-row>

    <el-table :height="tableHeight" v-loading="loading" :data="bankrecordList" stripe border>
      <el-table-column label="序号" type="index" width="60" align="center" />
      <el-table-column label="交易日期" align="center" prop="dtAcct" width="200" sortable />
      <el-table-column label="是否对账" prop="isVerify" width="150" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isVerify == 1" type="success">系统自动入账</el-tag>
          <el-tag v-if="scope.row.isVerify == 3" type="info">人工已入账</el-tag>
          <el-tag v-if="scope.row.isVerify == 0" type="warning">否</el-tag>
          <el-tag v-if="scope.row.isVerify == 2" type="danger">入账异常</el-tag>
          <el-tag v-if="scope.row.isVerify == 4" type="danger">人工已退款</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="入账用户" prop="entryUserId" width="250" align="center" />
      <el-table-column label="入账时间" prop="entryTime" width="250" align="center" />
      <el-table-column label="描述" prop="entryReason" width="180" align="center" />
      <el-table-column label="借贷标记" prop="trnType" width="150" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.trnType == 'CREDIT' ? 'primary' : 'success'" disable-transitions>{{ scope.row.trnType == 'CREDIT' ? "入账" : "出账" }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="交易金额(元)" prop="trnAmt" width="150" align="center" sortable />
      <el-table-column label="对方账户" prop="correlateAcctid" width="180" align="center" />
      <el-table-column label="对方账户名" prop="correlateName" width="200" align="center" />
      <el-table-column label="附言" prop="memo" width="150" align="center" />
      <el-table-column label="对方开户行" prop="correlateBankname" width="250" align="center" />
      <el-table-column label="柜员流水" prop="srvrtId" width="150" align="center" />
      <el-table-column label="对账" prop="attachInfo" width="180" align="center" />
      <el-table-column label="币种" prop="currency" width="80" align="center" />
      <el-table-column label="账户金额(元)" prop="balamt" width="150" align="center" v-if="checkPermi(['publicBill:bankFlow:bal'])"/>

      <el-table-column label="操作" align="center" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button v-if="scope.row.isVerify == 2 && checkPermi(['publicBill:bankFlow:edit'])" size="mini" type="text" icon="el-icon-edit" @click="handleBtnClick(scope.row)">操作</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['publicBill:bankFlow:query']">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    <!-- 添加或修改角色配置对话框 -->
    <Z-Dialog :title="title" :visible.sync="open" :isShowConfirm="false">
      <el-form ref="form" :model="form" label-width="150px">
        <el-form-item label="对账" prop="dtAcct">
          <el-input class="form-input" v-model="form.attachInfo" readonly />
        </el-form-item>
        <el-form-item label="交易日期" prop="dtAcct">
          <el-input class="form-input" v-model="form.dtAcct" readonly />
        </el-form-item>
        <el-form-item label="币种" prop="currency">
          <el-input class="form-input" v-model="form.currency" readonly />
        </el-form-item>
        <el-form-item label="对账" prop="isVerify">
          <el-select v-model="form.isVerify" clearable style="width:100%" disabled>
            <el-option v-for="dict in verifyList" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="借贷标记" prop="trnType">
          <el-select v-model="form.trnType" clearable style="width:100%" disabled>
            <el-option v-for="dict in trnTypeList" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="交易金额(元)" prop="trnAmt">
          <el-input class="form-input" v-model="form.trnAmt" readonly />
        </el-form-item>
        <el-form-item label="对方账号" prop="correlateAcctid">
          <el-input class="form-input" v-model="form.correlateAcctid" readonly />
        </el-form-item>
        <el-form-item label="对方账户名" prop="correlateName">
          <el-input class="form-input" v-model="form.correlateName" readonly />
        </el-form-item>
        <el-form-item label="入账用户" prop="entryUserId">
          <el-input class="form-input" v-model="form.entryUserId" readonly />
        </el-form-item>
        <el-form-item label="入账时间" prop="entryTime">
          <el-input class="form-input" v-model="form.entryTime" readonly />
        </el-form-item>
        <el-form-item label="对方开户行" prop="correlateBankname">
          <el-input class="form-input" v-model="form.correlateBankname" readonly />
        </el-form-item>
        <el-form-item label="附言" prop="memo">
          <el-input class="form-input" v-model="form.memo" readonly />
        </el-form-item>
        <el-form-item label="柜员流水" prop="srvrtId">
          <el-input class="form-input" v-model="form.srvrtId" readonly />
        </el-form-item>
      </el-form>
    </Z-Dialog>

    <Z-Dialog :title="title" :visible.sync="handleViewShow" @confirm="submitForm">
      <handle-view :form="form" ref="handleView"></handle-view>
    </Z-Dialog>
  </div>
</template>

<script>
import { listBankrecord, peopleEntry, peopleEntryClose } from "@/api/publicBill/bankrecord";
import { screenUser } from "@/api/system/user";
import handleView from "./handleView"
import { excelExportApi } from '@/api/filer'
import {checkPermi} from '@/utils/permission'

export default {
  name: "bankAccessFlow",
  dicts: ["bank_loan_status", "bank_verify_status"],
  components: { handleView },
  data() {
    return {
      //上传的图片
      dialogVisible: false,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      bankrecordList: [],
      userList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      handleViewShow: false,
      // 日期范围
      dateRange: [],

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: this.global.pageSize,
        status: undefined,
        beginTime: undefined,
        endTime: undefined,
      },

      trnTypeList: [{ label: '出账', value: 'DEBIT' }, { label: '入账', value: 'CREDIT' }],

      // 0否 1系统自动入账 2入账异常 3人工已入账 4人工已退款 5 银行异常数据
      verifyList: [
        { label: '否', value: 0 },
        { label: '系统自动入账', value: 1 },
        { label: '入账异常', value: 2 },
        { label: '人工已入账', value: 3 },
        { label: '人工已退款', value: 4 },
        { label: '银行异常数据', value: 5 },
      ],
      // 表单参数
      form: {},
    };
  },
  computed: {
    tableHeight() {
      if (this.bankrecordList.length > 0) {
        return 'calc(100vh - 330px)'
      }
      return '100%'
    },
    //状态列表添加全部
    loanStatusList() {
      let statusDictArray = JSON.parse(
        JSON.stringify(this.dict.type.bank_loan_status)
      );
      statusDictArray.unshift({ label: "全部", value: undefined });
      return statusDictArray;
    },
    verifyStatusList() {
      let statusDictArray = JSON.parse(
        JSON.stringify(this.dict.type.bank_verify_status)
      );
      statusDictArray.unshift({ label: "全部", value: undefined });
      return statusDictArray;
    },
  },
  watch: {
    "queryParams": {
      deep: true,
      handler: function (newV, oldV) {
        this.getList();
      },
    },
    dateRange() {
      if (this.dateRange.length >= 2) {
        this.queryParams.beginTime = String(this.dateRange[0]);
        this.queryParams.endTime = String(this.dateRange[1]);
      }
      this.getList();
    }
  },
  created() {
    this.getList();
  },
  methods: {
    checkPermi,
    getList() {
      this.loading = true;
      listBankrecord(this.queryParams).then((response) => {
        if (response.code == 200) {
          this.bankrecordList = response.data;
          this.total = response.total;
        }
        this.loading = false;
      });
    },

    getScreenUserList() {
      screenUser().then((response) => {
        if (response.code == 200) {
          this.userList = response.data;
        }
      });
    },


    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    // 表单重置
    reset() {
      this.resetForm("form");
    },

    /** 搜索按钮操作 */
    handleQuery() {
      if (!this.rulesAmount()) {
        return;
      }
      this.queryParams.pageNum = 1;

      this.getList();
    },

    rulesAmount() {
      if (this.queryParams.beginAmount && this.queryParams.endAmount) {
        if (this.queryParams.endAmount < this.queryParams.beginAmount) {
          this.$modal.msgError("金额区间不正确");
          return false;
        } else {
          return true;
        }
      } else {
        return true;
      }
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.queryParams.beginTime = undefined;
      this.queryParams.beginTime = undefined;
      this.queryParams.beginAmount = undefined;
      this.queryParams.endAmount = undefined;
      this.handleQuery();
    },

    /**  */
    handleUpdate(row) {
      this.reset();
      this.title = '银行流水查看';
      this.open = true;
      this.form = row;
      this.form.trnType = row.trnType;
    },

    submitForm() {
      let params = this.$refs.handleView.params;
      console.log(params)
      if (params.radio == '1'){
        if (params.userId == undefined){
          this.$modal.msgError("未选择用户");
          return
        }
        this.$alert('确定给【' + params.userId + ' '+params.name+'】 充值 【' + this.form.trnAmt + '元】', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            if (action == 'confirm'){
              peopleEntry(params).then((response) => {
                this.$modal.msgSuccess("入金成功");
                this.handleViewShow = false;
                this.getList();
              });
            }
          }
        });


      }else if (params.radio == '2'){
        params.id = this.form.id;
        
        peopleEntryClose(params).then((response) => {
          this.$modal.msgSuccess("退款成功");
          this.handleViewShow = false;
          this.getList();
        });
      }else {
        this.$modal.msgError("未选择类型");
      }
    },

    handleBtnClick(row) {
      this.handleViewShow = true;
      this.form = row;
      this.title = '入账异常处理';
      this.getScreenUserList();
    },

    /** 导出按钮操作 */
    exportExcel() {
      this.queryParams.beanName = 'BankRecordExport',
        this.queryParams.fileName = '银行流水',
        this.$alert('需要导出 "' + this.total + '" 条数据,是否确认导出', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            excelExportApi(this.queryParams, '/third');
          }
        });
    },

  },
};
</script>
<style scoped>
</style>
